<template>
  <div class="shop-cart mui-card">
    <div class="mui-card-header">
      <div v-if="isselectall" class="circle-img slg-icon select" @tap.prevent.stop="isselectall = false"></div>
      <div v-else class="circle-img slg-icon" @tap.prevent.stop="isselectall = true"></div>
      <span v-if="is_score_list" class="circle-text">积分商品</span>
      <span v-else class="circle-text">普通商品</span>
      <div v-if="issetting" class="setting-button" @tap.prevent.stop="issetting = false">完成</div>
      <div v-else class="setting-button" @tap.prevent.stop="issetting = true">编辑</div>
    </div>
    <div class="mui-card-content">
      <div class="mui-card-content-inner">
        <div class="cart-item" :class="{ delete: issetting }" v-for="({check,imgUrl,product_name,id,num,savepath,savename,is_score,full_score_buy,product_discount_price,product_old_price,product_price, sku, product_id}, index) in products" @tap.prevent.stop="goToProduct(product_id)">
          <div v-if="check" class="item-check" @tap.prevent.stop="changeCheck(false, index)">
            <div  class="circle-img slg-icon select" ></div>
          </div>
          <div v-else class="item-check" @tap.prevent.stop="changeCheck(true, index)">
            <div  class="circle-img slg-icon" ></div>
          </div>
          <div class="item-content">
            <div class="content-left" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + savepath + savename + ');'"></div>
            <div class="content-right">
              <span class="product-info right-text">{{ product_name }}</span>
              <span class="sku right-text">{{ sku.attr1 ? sku.attr1 : '' }}{{ sku.attr2 ? ','+sku.attr2 : '' }}</span>
              <div class="right-footer" :class="{ delete: !issetting }">
                <div :id="'num-' + id" class="auto-rem mui-numbox" data-numbox-step='1' :data-numbox-min='1' data-numbox-max='99'>
                  <!-- "-"按钮，点击可减小当前数值 -->
                  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                  <input class="mui-numbox-input" type="number" value="num" @change="changeBuyNum($event.target.value, index)" />
                  <!-- "+"按钮，点击可增大当前数值 -->
                  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
              </div>
              <div class="right-footer" :class="{ delete: issetting }">
                <template v-if="is_score == 1">
                  <div v-if="full_score_buy == 0" class="price">￥{{ (sku.old_price / 100).toFixed(0) }}
                    <span class="score">+ 积分{{ (sku.discount_price / 100 * 10).toFixed(0) }}</span>
                  </div>
                  <div v-else class="price score">积分{{ (sku.discount_price / 100 * 10).toFixed(0) }}</div>
                </template>
                <template v-else>
                  <div class="price">￥{{ (sku.price / 100).toFixed(0) }}</div>
                </template>
  
                <div class="num"> x{{ num }} </div>
              </div>
            </div>
          </div>
          <div class="item-delete" @tap.prevent.stop="delItem(id, index)">
            删除
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiDomain, ajax } from 'assets/js/Lib'
import { once, map, filter } from 'lodash'

const onceInit = once(function () {
  mui('.mui-numbox').numbox()
})

export default {
  data() {
    return {
      isselectall: false,
      issetting: false
    }
  },
  computed: {
    webApiDomain: function () {
      return apiDomain;
    }
  },
  components: {},
  watch: {
    isselectall: function () {
      this.products.forEach(product => {
        product.check = this.isselectall
      }, this)
      this.$emit('productChange', this.calc(), this.is_score_list)
      this.$emit('cartsChange', this.products, this.is_score_list)
    },
    issetting: function () {
      if (!this.issetting) {
        const senddata = map(filter(this.products, 'change'), function (prod) {
          return {
            id: prod.id,
            num: prod.num
          }
        })
        if (senddata.length > 0) {
          ajax({
            url: '/api/cart/addlist',
            type: 'POST',
            data: senddata,
            showLoading: true,
            beforeSend: function (res) {
              //展开遮罩
            },
            success: res => {
              //关闭遮罩
              filter(this.products, 'change').forEach(prod => {
                prod.change = false
              }, this)
            }
          })
        }
      }
    }
  },
  props: {
    products: {
      type: Array
    },
    is_score_list: {
      type: Boolean,
      default: false
    }
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() { },
  //在挂载开始之前被调用
  beforeMount() { },
  //已成功挂载，相当ready()
  mounted() {
    mui('.mui-numbox').numbox()
    console.log('products', this.products);
  },
  updated() {
    onceInit()
    this.products.forEach(function (product) {
      mui('#num-' + product.id).numbox().setValue(product.num)
    })
  },
  //相关操作事件
  methods: {
    calc: function () {
      let score = 0, price = 0
      filter(this.products, 'check').forEach(product => {
        score += product.product_discount_price * product.num
        price += (product.is_score == 1 ? product.product_old_price : product.product_price) * product.num
      }, this)

      return {
        score: score,
        price: price
      }
    },
    changeCheck: function (check, index) {
      this.products[index].check = check

      this.$emit('productChange', this.calc(), this.is_score_list)
      this.$emit('cartsChange', this.products, this.is_score_list)
    },
    changeBuyNum: function (num, index) {
      this.products[index].num = num
      this.products[index].change = true
      this.$emit('productChange', this.calc(), this.is_score_list)
      this.$emit('cartsChange', this.products, this.is_score_list)
    },
    delItem: function(id, index) {
      ajax({
        url: '/api/cart/del',
        type: 'GET',
        data: {id: id},
        showLoading: true,
        beforeSend: function (res) {
          //展开遮罩
        },
        success: res => {
          //关闭遮罩
          this.products.splice(index,1)
          this.$emit('cartsChange', this.products, this.is_score_list)
          this.$emit('productChange', this.calc(), this.is_score_list)
        }
      })
    },
    goToProduct(id) {
      window.location.href = '/views/product.html?isBiYao=false&id=' + id;
    }
  }
}
</script>

<style lang="less">
.cart-item {
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  margin-top: .8rem;
  &:first-child {
    margin-top: 0;
  }
  &.delete {
    .item-content {
      width: 7.25rem;
      .content-right {
        width: 4.75rem;
      }
    }
    .item-delete {
      width: 1.5rem;
    }
  }
  &>div {
    height: 100%;
    float: left;
    transition: width .5s;
  }
  .item-check {
    width: .75rem;
    padding: 1rem 0;
  }
  .item-content {
    width: 8.75rem;
    overflow: hidden;
    .content-left {
      float: left;
      background: rgba(0, 0, 0, .03);
      background-size: cover !important;
      width: 2.5rem;
      height: 2.5rem;
      background-position: top center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .content-right {
      float: left;
      transition: width .5s;
      width: 6.25rem;
      height: 2.5rem;

      .product-info {
        float: left;
      }

      .right-text {
        width: 100%;
        height: .92rem;
        padding: 0 0.3333333333rem;
        font-size: .3333333333rem;
        color: #333333;
        overflow: hidden;
        line-height: .46rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;

        &.sku {
          height: .5rem;
          line-height: .475rem;
          font-size: .3733333333rem;
          -webkit-line-clamp: 1;
          opacity: .5;
          float: left;
        }
      }

      .right-footer {
        width: 100%;
        padding: 0 0.3333333333rem;
        margin-top: .2rem;
        float: left;
        overflow: hidden;

        &.delete {
          display: none;
        }

        .auto-rem.mui-numbox {
          margin-left: .1rem;
          height: .9rem;
          box-sizing: content-box !important;
        }

        .price {
          font-size: .4266666667rem;
          line-height: .4266666667rem;
          color: #f23030;
          float: left;
          font-weight: 600;

          &.score {
            font-size: 1em;
            color: #333333;
          }
        }

        .score {
          font-size: .333333333rem;
          color: #333333;
        }

        .num {
          float: right;
          font-size: .3366666667rem;
          line-height: .4266666667rem;
          opacity: .5
        }
      }
    }
  }
  .item-delete {
    width: 0;
    background-color: #f23030;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    font-size: .375rem;
    line-height: .375rem;
  }
}
</style>
